<template>
	<view class="classlist">
		<view class="loadingLayout" v-if="!classlist.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classlist" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingLayout" v-if="classlist.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {
		apiGetClassList,
		apiUserWallList
	} from "@/api/apis.js"
	import {goHome} from "@/utils/common.js"
	const classlist = ref([])
	const noData = ref(false)
	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}
	let pageName
	onLoad((e) => {
		let {id=null, name=null, type=null} = e
		if(type) queryParams.type = type
		if(id) queryParams.classid = id
		pageName = name
		uni.setNavigationBarTitle({
			title:name
		})
		getClassList()
	})

	onReachBottom(() => {
		if (noData.value) return
		queryParams.pageNum++
		getClassList()
	})

	const getClassList = async () => {
		let res
		if(queryParams.type){
			res = await apiUserWallList(queryParams)
		}
		if(queryParams.classid) {
			res = await apiGetClassList(queryParams)
		}
		if(queryParams.pageSize > res.data.length){
			noData.value = true
		}
		classlist.value.push(...res.data)
		uni.setStorageSync("storgClassList", classlist.value)
	}
	
	//分享好友
	onShareAppMessage(() => {
		return {
			title: '咸虾米分类-' + pageName,
			path: '/pages/classlist/classlist?classid=' + queryParams.classid + "&name=" + pageName
		}
	})
	
	//分享朋友圈 要认证
	onShareTimeline(()=>{
		return {
			title: '咸虾米壁纸~~~',
			query: 'classid=' + queryParams.classid + "&name=" + pageName
		}
	})
	
	onUnload(()=>{
		uni.removeStorageSync("storgClassList")
	})
</script>

<style lang='scss' scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>